/**
 * 入口JS
 *
 * 类组件：
 *    1. 类名需要使用 大驼峰
 *    2. 需要继承基类： React.Component  || React.PureComponent
 *    3. 必须要实现 render 函数，该函数需要返回一段 React元素 JSX
 *
 * 函数组件:
 *    1. 函数名需要使用 大驼峰
 *    2. 必须要有返回值, 返回一段 React元素
 *
 * 使用组件:
 *    将 组件名当成自定义标签使用即可。
 */

import ReactDOM from "react-dom/client";

import Hello from "./components/Hello";
import World from "./components/World";

// 创建容器
const root = ReactDOM.createRoot(document.querySelector("#root")!);

// 渲染容器
root.render(
  <div>
    <h1>Study 组件</h1>

    {/* 使用 Hello 类组件 
      1. 实例化该类
      2. 调用实例的 render 方法
      3. render 方法,返回值的内容,就是组件渲染的内容
    */}
    <Hello />
    <Hello />
    <Hello />

    <hr />
    {/* 
      使用 World 函数组件 
      1. 执行该函数
      2. 函数的返回值的内容,就是组件渲染的内容
    */}
    <World />
    <World />
    <World />
  </div>
);
